<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        // 创建一个广州节点，添加到#city
        myClick("btn01", function () {
          // 创建广州节点
          // 创建li元素节点

          /**
           * document.createElement()
           * 可以用于创建一个元素节点对象
           * 它需要一个标签作为参数，将会根据该标签名创建元素节点对象
           * 并将创建好的对象作为返回值返回
           */
          var li = document.createElement("li");
          // 创建广州文本节点

          /**
           * document.createTextNode
           * 用来创建一个文本节点对象
           * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
           */
          var gzText = document.createTextNode("广州");

          //    将gzText设置li的子节点
          /**
           * appendChild()
           *       向一个父亲节点中添加一个新的子节点
           *       用法：父节点.appendChild(子节点)
           */
          li.appendChild(gzText);

          //   获取id为city的节点
          var city = document.getElementById("city");

          city.appendChild(li);
        });
        // 将广州节点插入到#bj节点
        myClick("btn02", function () {
          // 创建一个广州
          var li = document.createElement("li");
          var gzText = document.createTextNode("广州");
          li.appendChild(gzText);

          //  获取id为bj的节点
          var bj = document.getElementById("bj");

          // 获取city
          var city = document.getElementById("city");

          /**insertBefore()
           *  可以在指定的子节点前插入新的子节点
           *  语法：
           *     父节点.insertBefore(新节点,旧节点);
           */
          city.insertBefore(li, bj);
        });

        // 使用广州节点替换#bj节点
        myClick("btn03", function () {
          // 创建一个广州
          var li = document.createElement("li");
          var gzText = document.createTextNode("广州");
          li.appendChild(gzText);
          //  获取id为bj的节点
          var bj = document.getElementById("bj");

          // 获取city
          var city = document.getElementById("city");

          /**
           * replaceChild()
           * 可以使用指定的子节点替换已有的子节点
           * 语法：
           *      父节点.replaceChild(新节点,旧节点)
           */
          city.replaceChild(li, bj);
        });
        // 删除#bj节点
        myClick("btn04", function () {
          var bj = document.getElementById("bj");
          var city = document.getElementById("city");

          /**
           * removeChild()
           * 可以删除一个子节点
           * 语法：
           *    父节点.removeChild(子节点);
           * 子节点.parentNode.removeChild(子节点);
           */

          //   city.removeChild(bj);

          bj.parentNode.removeChild(bj);
        });

        // 读取#city内的html代码
        myClick("btn05", function () {
          var city = document.getElementById("city");
          alert(city.innerHTML);
        });
        // 设置#bj内的html代码
        myClick("btn06", function () {
          var bj = document.getElementById("bj");
          bj.innerHTML = "昌平";
        });

        myClick("btn07", function () {
          var city = document.getElementById("city");

          /**
           * 使用innerHTML也可以完成dom的增删改的相关操作
           * 一般我们会两只方式相结合使用
           */
          // city.innerHTML += "<li>广州</li>";

          // 创建一个li
          var li = document.createElement("li");
          // 向li中设置文本
          li.innerHTML = "广州";
          city.appendChild(li);
        });

        function myClick(idStr, fun) {
          var btn = document.getElementById(idStr);
          btn.onclick = fun;
        }
      };
    </script>
  </head>
  <body>
    <div class="total">
      <div class="inner">
        <p>你喜欢哪个城市？</p>
        <ul id="city">
          <li id="bj">北京</li>
          <li>上海</li>
          <li>东京</li>
          <li>首尔</li>
        </ul>
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">创建一个广州节点，添加到#city</button></div>
      <div><button id="btn02">将广州节点插入到#bj节点</button></div>
      <div><button id="btn03">使用广州节点替换#bj节点</button></div>
      <div><button id="btn04">删除#bj节点</button></div>
      <div><button id="btn05">读取#city内的html代码</button></div>
      <div><button id="btn06">设置#bj内的html代码</button></div>
      <div><button id="btn07">向city中添加广州</button></div>
    </div>
  </body>
</html>
